/**
 * 段落格式功能模块
 * 负责初始化编辑器的标题、文本对齐、行间距和列表等段落相关功能按钮
 */

import { TitleLevel, RowFlex, ListType, ListStyle } from '../../editor'

/**
 * 初始化段落格式功能模块
 * @param editor 编辑器实例
 * @param isApple 是否为苹果设备
 */
export default function initParagraphFormat(
  editor: any,
  isApple: boolean
): void {
  // 初始化标题按钮
  const titleDom = document.querySelector<HTMLDivElement>('.menu-item__title')!
  const titleOptionDom = titleDom.querySelector<HTMLDivElement>('.options')!
  titleOptionDom.querySelectorAll('li').forEach((li, index) => {
    li.title = `Ctrl+${isApple ? 'Option' : 'Alt'}+${index}`
  })

  titleDom.onclick = function () {
    console.log('title')
    titleOptionDom.classList.toggle('visible')
  }
  titleOptionDom.onclick = function (evt) {
    const li = evt.target as HTMLLIElement
    const level = <TitleLevel>li.dataset.level
    editor.command.executeTitle(level || null)
  }

  // 初始化左对齐按钮
  const leftDom = document.querySelector<HTMLDivElement>('.menu-item__left')!
  leftDom.title = `左对齐(${isApple ? '⌘' : 'Ctrl'}+L)`
  leftDom.onclick = function () {
    console.log('left')
    editor.command.executeRowFlex(RowFlex.LEFT)
  }

  // 初始化居中对齐按钮
  const centerDom =
    document.querySelector<HTMLDivElement>('.menu-item__center')!
  centerDom.title = `居中对齐(${isApple ? '⌘' : 'Ctrl'}+E)`
  centerDom.onclick = function () {
    console.log('center')
    editor.command.executeRowFlex(RowFlex.CENTER)
  }

  // 初始化右对齐按钮
  const rightDom = document.querySelector<HTMLDivElement>('.menu-item__right')!
  rightDom.title = `右对齐(${isApple ? '⌘' : 'Ctrl'}+R)`
  rightDom.onclick = function () {
    console.log('right')
    editor.command.executeRowFlex(RowFlex.RIGHT)
  }

  // 初始化两端对齐按钮
  const alignmentDom = document.querySelector<HTMLDivElement>(
    '.menu-item__alignment'
  )!
  alignmentDom.title = `两端对齐(${isApple ? '⌘' : 'Ctrl'}+J)`
  alignmentDom.onclick = function () {
    console.log('alignment')
    editor.command.executeRowFlex(RowFlex.ALIGNMENT)
  }

  // 初始化分散对齐按钮
  const justifyDom = document.querySelector<HTMLDivElement>(
    '.menu-item__justify'
  )!
  justifyDom.title = `分散对齐(${isApple ? '⌘' : 'Ctrl'}+Shift+J)`
  justifyDom.onclick = function () {
    console.log('justify')
    editor.command.executeRowFlex(RowFlex.JUSTIFY)
  }

  // 初始化行间距按钮
  const rowMarginDom = document.querySelector<HTMLDivElement>(
    '.menu-item__row-margin'
  )!
  const rowOptionDom = rowMarginDom.querySelector<HTMLDivElement>('.options')!
  rowMarginDom.onclick = function () {
    console.log('row-margin')
    rowOptionDom.classList.toggle('visible')
  }
  rowOptionDom.onclick = function (evt) {
    const li = evt.target as HTMLLIElement
    editor.command.executeRowMargin(Number(li.dataset.rowmargin!))
  }

  // 初始化列表按钮
  const listDom = document.querySelector<HTMLDivElement>('.menu-item__list')!
  listDom.title = `列表(${isApple ? '⌘' : 'Ctrl'}+Shift+U)`
  const listOptionDom = listDom.querySelector<HTMLDivElement>('.options')!
  listDom.onclick = function () {
    console.log('list')
    listOptionDom.classList.toggle('visible')
  }
  listOptionDom.onclick = function (evt) {
    const li = evt.target as HTMLLIElement
    const listType = <ListType>li.dataset.listType || null
    const listStyle = <ListStyle>(<unknown>li.dataset.listStyle)
    editor.command.executeList(listType, listStyle)
  }
}
